$downloadable-item-height: 40px;

.downloadable-item {
  border: 1px solid #d7d8df;
  display: flex;
  flex-direction: column;
  height: $downloadable-item-height;
  margin-top: -1px; // Cancels overlapping borders extra thickness
  outline: none;
  padding: 16px 0 0 16px;
  transition: height 30ms ease-in;

  &:first-of-type {
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
  }

  &:last-of-type {
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
  }

  &__expanded {
    height: auto;
    padding-bottom: 5px;
  }

  .header {
    cursor: pointer;
    display: flex;
    flex-direction: row;

    &__arrow {
      height: 0;
      margin-right: 16px;
      width: 0;

      &__right {
        border-bottom: 5px solid transparent;
        border-left: 6px solid #757575;
        border-radius: 3px;
        border-top: 5px solid transparent;
        margin-top: 6px;
      }

      &__down {
        border-left: 5px solid transparent;
        border-radius: 3px;
        border-right: 5px solid transparent;
        border-top: 6px solid #757575;
        margin-top: 8px;
      }
    }
  }

  .body {
    display: flex;
    flex-wrap: wrap;

    &__link {
      align-items: center;
      background: var(--brand2);
      border-radius: 40px;
      color: var(--brand6);
      display: flex;
      font-size: 14px;
      line-height: 36px;
      margin: 5px;
      padding: 0 15px 0 0;
      text-decoration: none;
    }
  }
}
